<template>
  <div>
    <div class="filter-condition">
      <a-space>
        <span>时间范围：</span>
        <a-radio-group buttonStyle="solid" v-model="queryParam.warningTimeType" class="area-linkage">
          <a-radio-button v-for="(item, key) in optionsTimes" :key="key" :value="item.value">
            {{ item.text }}
          </a-radio-button>
        </a-radio-group>
        <a-range-picker
          v-show="queryParam.warningTimeType === '0'"
          :allowClear="true"
          v-model="rangePickerTime"
          valueFormat="YYYY-MM-DD"
          @change="rangePickerChange"
          style="width:14vw"
        />
        <span style="margin-left:10px;">行政区划：</span>
        <div class="area-linkage">
          <area-select
            type="all"
            :level="1"
            v-model="areaLinkage1"
            class="area-linkage"
            :data="pcaa"
            :disabled="true"
          ></area-select>
          <a-select style="width:100px;margin-top:1px;" v-model="queryParam.xzqh" placeholder="请选择" allowClear>
            <template v-for="(value, key) in districtData">
              <a-select-option :key="key" :value="key">
                {{ value }}
              </a-select-option>
            </template>
          </a-select>
        </div>
        <span class="sjly" style="margin-left:10px;">数据来源：</span>
        <j-dict-select-tag
          class="sjly"
          v-model="queryParam.sourceFrom"
          placeholder="请选择"
          dictCode="dataSource"
          style="width: 100px;"
        />
      </a-space>
      <div class="btnBox">
        <a-button type="primary" @click="onQuery">确 定</a-button>
        <a-button @click="onReset()">重 置</a-button>
        <a-button type="primary" @click="download()">导出</a-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      areaLinkage1: ['220000', '220100'],
      pcaa: this.$Jpcaa,
      districtData: {},
      rangePickerTime: [],
      optionsTimes: [
        { value: '2', text: '今天' },
        { value: '4', text: '近一周' },
        { value: '5', text: '近一月' },
        { value: '0', text: '自定义' }
      ],
      queryParam: {
        warningTimeType: '2',
        xzqh: undefined
      }
    }
  },
  mounted() {
    this.onChangeCityData('220100')
  },
  methods: {
    // 自定义时间
    rangePickerChange(date) {
      this.$set(this.queryParam, 'warningStartTime', date[0])
      this.$set(this.queryParam, 'warningEndTime', date[1])
    },
    onChangeCityData(key, value) {
      let districtTmp = this.pcaa[key]
      this.districtData = Object.assign(this.districtData, districtTmp)
    },
    onQuery() {
      console.log('queryParam', this.queryParam)
      if (this.queryParam.warningTimeType == '0' && !this.queryParam.warningStartTime) {
        this.$message.warning('请选择自定义时间')
        return
      }
      if (this.queryParam.warningTimeType != '0') {
        this.queryParam.warningStartTime = undefined
        this.queryParam.warningEndTime = undefined
        this.rangePickerTime = undefined
      }
      this.$emit('onQuery', this.queryParam)
    },
    onReset() {
      this.rangePickerTime = undefined
      this.queryParam = {
        warningTimeType: '2',
        xzqh: undefined
      }
      this.$emit('onReset', this.queryParam)
    },
    // 下载PDF
    download() {
      this.$emit('onDownload')
    }
  }
}
</script>
<style lang="less" scoped>
.filter-condition {
  // display: flex;
  width: 100%;
  // justify-content: space-between;
  // align-items: center;
  padding: 10px 20px 10px 10px;
  margin-bottom: 10px;
  background-color: white;
  /deep/.area-select.medium {
    width: 80px;
  }
  /deep/.area-select-wrap .area-select {
    margin-left: 0px;
    margin-right: 4px;
  }
  /deep/.area-select {
    line-height: 1.15;
  }
  /deep/.area-select .area-select-icon {
    display: none;
  }
  .btnBox {
    margin-top: 10px;
    .ant-btn {
      margin-right: 20px;
    }
  }
}
.area-linkage {
  // width: 460px;
  display: flex;
  align-items: center;
}
</style>
